<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
    <meta name="description" content="A new Flutter project." />

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="example" />
    <link rel="apple-touch-icon" href="/icons/Icon-192.png" />

    <title>example</title>
    <link rel="manifest" href="/manifest.json" />
  </head>

  <body>
    <button id="temp">Play</button>
    <script src="main.dart.js" type="application/javascript"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.39/Tone.js"
      type="application/javascript"
    ></script>
    <script>
      const synth = new Tone.PolySynth().toDestination();
      document.body.addEventListener("click", () => {
        // const note = "C4";
        // playNote(note);
        // setTimeout(() => stopNote(note), 1000);
        Tone.context.resume();
      });
      function playNote(note, duration) {
        Tone.context.resume();
        synth.triggerAttack(note, duration ?? Tone.context.currentTime);
      }
      function stopNote(note) {
        Tone.context.resume();
        synth.triggerRelease(note, Tone.context.currentTime);
      }
    </script>
  </body>
</html>
